<template>
  <div>
    <el-card shadow="never" class="search-card">
      <el-row :gutter="20" class="el-row">
        <el-col class="button-box" :span="4">
          <el-input
            v-model="queryVo.query.queryInfo"
            size="small"
            class="search-input"
            placeholder="请输入搜索内容"
            clearable
            @clear="handleClear('queryInfo')"
          />
        </el-col>
        <el-col class="button-box" :span="6">
          <div>
            设备编号：
            <el-input
              v-model="queryVo.query.deviceId"
              size="small"

              class="device-id-input"
              clearable
              @clear="handleClear('deviceId')"
            />
          </div>

        </el-col>
        <el-col class="button-box" :span="4.5">
          使用日期：
          <el-date-picker
            v-model="queryVo.query.usageDate"
            size="small"
            value-format="yyyy-MM-dd"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          />

        </el-col>

        <el-col class="button-box" :span="6" />
        <el-col :span="5">
          <div style="float: right">
            <el-button
              size="small"
              type="primary"
              plain
              @click="handleSearch"
            >搜索</el-button>

            <el-button
              size="small"
              type="primary"
              plain
              @click="resetQueryVo"
            >重置</el-button>

            <el-button
              size="small"
              type="primary"
              plain
              @click="unfold = !unfold"
            >{{ unfold === false ? '更多' :'收起' }}</el-button>

          </div>

        </el-col>
      </el-row>
      <div v-if="unfold">
        <el-row v-if="unfold" :gutter="20" class="extend-row">
          <el-col class="button-box" :span="7">
            专业：
            <el-select
              v-model="queryVo.query.studentMajor"
              class="lab-selector"
              size="small"
              filterable
              clearable
              placeholder="学生专业"
              @clear="handleClear('studentMajor')"
            >
              <el-option
                v-for="item in majorList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-col>

          <el-col class="button-box" :span="4.5">
            <div>
              学生姓名：
              <el-input
                v-model="queryVo.query.studentName"
                size="small"
                class="search-input"
                placeholder="请输入搜索内容"
                clearable
                @clear="handleClear('studentName')"
              />
            </div>

          </el-col>

          <el-col class="button-box" :span="6" />

        </el-row>
        <el-row v-if="unfold" :gutter="20" class="extend-row">
          <el-col class="button-box" :span="7">
            实验室：
            <el-select
              v-model="queryVo.query.lab"
              class="lab-selector"
              size="small"
              filterable
              clearable
              placeholder="实验室"
              @clear="handleClear('lab')"
            >
              <el-option
                v-for="item in labList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-col>

          <el-col class="button-box" :span="4.5">
            <div v-if="isAdmin">
              单位名称：
              <el-select
                v-model="queryVo.query.unit"
                size="small"
                class="unit-selector"
                clearable
                placeholder="单位名称"
                @clear="handleClear('unit')"
              >
                <el-option
                  v-for="item in unitList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>

          </el-col>

          <el-col class="button-box" :span="6" />

        </el-row>
      </div>

    </el-card>
    <el-card shadow="never" class="device-detail-card">

      <el-table
        ref="filterTable"
        :data="recordList"
        style="width: 100%"
      >
        <el-table-column
          prop="usageDate"
          label="使用日期"
          width="100"
        />
        <el-table-column
          prop="studentMajor"
          label="学生专业"
          width="100"
        />
        <el-table-column
          prop="studentName"
          label="学生姓名"
          width="100"
        />

        <el-table-column
          prop="lab"
          label="实验室"
          width="100"
        />

        <el-table-column
          prop="deviceId"
          label="设备编号"
          width="100"
        />

        <el-table-column
          prop="deviceName"
          label="实验设备"
          width="100"
        />

        <el-table-column
          prop="unit"
          label="单位"
          width="150"
        />

        <el-table-column
          prop="startTime"
          label="开始时间"
          width="180"
        />

        <el-table-column
          prop="endTime"
          label="结束时间"
          width="180"
        />

        <el-table-column
          prop="duration"
          label="使用时长"
          width="100"
        />

      </el-table>
      <el-pagination
        :current-page="queryVo.pageNum"
        :page-sizes="[1, 2, 5, 100]"
        :page-size="queryVo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import { getRecordList } from '@/api/deviceRecord'
import { getLaboratoryList } from '@/api/laboratory'
import { getUnitList } from '@/api/unit'
import checkPermission from '@/utils/permission'
import { getMajorList } from '@/api/major'

export default {
  name: 'DeviceDetail',
  props: ['fromDevice', 'deviceId'],

  data() {
    return {
      isAdmin: checkPermission(['admin']),
      unfold: false,
      totalCount: 5,
      searchInfo: '',
      queryVo: {
        query: {
          queryInfo: null,
          deviceId: null,
          lab: null,
          unit: null,
          studentName: null,
          studentMajor: null,
          deviceName: null,
          usageDate: null
        },
        pageNum: 1,
        pageSize: 5
      },

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },

      recordList: [],
      labList: [],
      unitList: [],
      majorList: []

    }
  },

  mounted() {
    const tempData = localStorage.getItem('tempData')
    let data = {}
    if (tempData) {
      data = JSON.parse(tempData)
    } else {
      data = this.$route.params

      localStorage.setItem('tempData', JSON.stringify(this.$route.params))
    }

    if (data.fromDevice) {
      this.queryVo.query.deviceId = data.deviceId

      getRecordList(this.queryVo).then(response => {
        this.recordList = response.data.list
        this.totalCount = response.data.total
      })
    } else {
      getRecordList(this.queryVo).then(response => {
        this.recordList = response.data.list
        this.totalCount = response.data.total
      })
    }
    getLaboratoryList(this.queryVo).then(response => {
      this.labList = response.data.list
    })

    getUnitList(this.queryVo).then(response => {
      this.unitList = response.data.list
    })

    getMajorList(this.queryVo).then(response => {
      this.majorList = response.data.list
    })
  },

  beforeDestroy() {
    localStorage.removeItem('tempData')
  },
  methods: {
    handleClear(queryParam) {
      this.queryVo.query[queryParam] = null
    },
    handleSearch() {
      getRecordList(this.queryVo).then(response => {
        this.recordList = response.data.list
        this.totalCount = response.data.total
      })
    },
    resetQueryVo() {
      this.queryVo.query = {
        queryInfo: null,
        deviceId: null,
        lab: null,
        unit: null,
        deviceName: null
      }
    },

    handleSizeChange(newSize) {
      this.queryVo.pageSize = newSize
      getRecordList(this.queryVo).then(response => {
        this.recordList = response.data.list
        this.totalCount = response.data.total
      })
    },
    handleCurrentChange(newSize) {
      this.queryVo.pageNum = newSize
      getRecordList(this.queryVo).then(response => {
        this.recordList = response.data.list
        this.totalCount = response.data.total
      })
    }
  }

}
</script>

<style scoped>
.search-input {
  width: 150px;
}
.device-id-input {
  width: 120px;
}
.selector {
  width: 130px;
}
.search-card {
  font-size: 15px;
}
.el-col {
  min-height: 1px;
}
.extend-row{
  margin-top: 10px;
}
</style>
